<template>
  <div style="padding: 10px">
    <a-breadcrumb
      style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
    >
      <a-breadcrumb-item>用户管理</a-breadcrumb-item>
      <a-breadcrumb-item>余额管理</a-breadcrumb-item>
    </a-breadcrumb>
    <div align="center">
      <a-typography-title :level="2">查询</a-typography-title>
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="用户公钥">
          <div style="display: flex">
            <a-input v-model:value="user_id" /> &nbsp;&nbsp;&nbsp;
            <a-button type="primary" @click="getBalance()">查询</a-button
            >&nbsp;&nbsp;&nbsp;
            <a-button type="primary" @click="reset()">重置</a-button>
          </div>
        </a-form-item>
        <a-form-item label="用户余额：">
          <div style="width: 100px">
            <span>{{ balance.balance }}</span>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import { DownloadOutlined, DashboardOutlined } from "@ant-design/icons-vue";
import { defineComponent, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { get, post, tip } from "@/common";
import { Modal, message } from "ant-design-vue";

const balance = ref("");
const user_id = ref("");
const getBalance = () => {
  balance.value = "";
  get("/manager/user/balance", { user_id: user_id.value }).then(res => {
    if(res.data!=null){
      balance.value = res.data.balance;
    }
    message.info(res.message);
  });
};
const reset = () => {
  balance.value = "";
  user_id.value = "";
};
</script>